<script>
import * as echarts from 'echarts';
import data from './app.js'

export default {
    mounted() {
        var myChart = echarts.init(document.getElementById('box'));


        const treemapOption = {
            series: [
                {
                    type: 'treemap',
                    id: 'echarts-package-size',
                    animationDurationUpdate: 1000,
                    roam: false,
                    nodeClick: undefined,
                    data: data.children,
                    universalTransition: true,
                    label: {
                        show: true
                    },
                    breadcrumb: {
                        show: false
                    }
                }
            ]
        };
        const sunburstOption = {
            series: [
                {
                    type: 'sunburst',
                    id: 'echarts-package-size',
                    radius: ['20%', '90%'],
                    animationDurationUpdate: 1000,
                    nodeClick: undefined,
                    data: data.children,
                    universalTransition: true,
                    itemStyle: {
                        borderWidth: 1,
                        borderColor: 'rgba(255,255,255,.5)'
                    },
                    label: {
                        show: false
                    }
                }
            ]
        };
        let currentOption = treemapOption;
        myChart.setOption(currentOption);

        setInterval(function () {
            currentOption =
                currentOption === treemapOption ? sunburstOption : treemapOption;
            myChart.setOption(currentOption);
        }, 1000);

    }
}
</script>
<template>
    <div id="box"></div>
</template>
<style lang="scss" scoped>
#box {
    width: 800px;
    height: 550px;
}
</style>